<template>
  <div>
    <van-nav-bar title="提币详情" right-text left-arrow @click-left="goBack"></van-nav-bar>
    <!-- 图片 -->
    <div>
      <img src="../../assets/images/icon-coin.png" alt>
      <ul>
        <li>确认提币成功</li>
        <li class="await">等待系统审核后到账</li>
      </ul>
    </div>

    <!-- 购买数量 -->
    <div style="padding:25px">
      <div class="price">
        <!-- 数量 -->
        <div>提币币种：</div>
        <span>{{$route.query.coinNow}}</span>
      </div>
      <div class="price">
        <!-- 单价 -->
        <div>提币数量：</div>
        <span>{{$route.query.virtualWalletWithdrawNumber}} {{$route.query.coinNow}}</span>
      </div>
      <div class="price">
        <!-- 单价 -->
        <div>提币时间：</div>
        <span>{{nowTime}}</span>
      </div>
    </div>
    <div class="buttonbox">
      <button @click="goBack">确定</button>
    </div>
  </div>
</template>
<script>
import { NavBar, Row, Col, Button } from "vant";
export default {
  data() {
    return {
      nowTime: "",
      timer: ""
    };
  },
  components: {
    [NavBar.name]: NavBar,
    [Row.name]: Row,
    [Col.name]: Col,
    [Button.name]: Button
  },
  methods: {
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? "0" + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1;
      let date =
        new Date(timeStamp).getDate() < 10
          ? "0" + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate();
      let hh =
        new Date(timeStamp).getHours() < 10
          ? "0" + new Date(timeStamp).getHours()
          : new Date(timeStamp).getHours();
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? "0" + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes();
      this.nowTime =
        year + "年" + month + "月" + date + "日" + " " + hh + ":" + mm;
      console.log(this.nowTime);
    },
    // 定时器函数
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 30 * 1000);
    },
    destroyed() {
      if (this.timer) {
        //如果定时器在运行则关闭
        clearInterval(this.timer);
      }
    }
  },
  created() {
    this.nowTimes();
    this.destroyed();
  },
  mounted() {
    // this.nowTimes();
  }
};
</script>
<style lang="less" scoped>
img {
  width: 70px;
  height: 70px;
  margin-top: 40px;
}
ul li {
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  margin-top: 26px;
}
.await {
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin-top: 9px;
}

.price {
  display: flex;
  line-height: 35px;
}
.price div {
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
}
.price span {
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin-left: 23px;
}
.price1 {
  display: flex;
  line-height: 40px;
}
.price1 div {
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
}
.price1 span {
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin-left: 40px;
}
.buttonbox {
  width: 95%;
  height: 45px;
  margin: 0 auto;
  position: absolute;
  bottom: 80px;
  padding: 10px;
}
.buttonbox > button {
  width: 95%;
  height: 45px;
  background: #d5aa6e;
  border-radius: 20px;
  border: none;
  height: 45px;
  line-height: 45px;
  color: #ffffff;
}
</style>


